<template>
	<view>
		<view class="top">
			<view class="num">团队人数：{{num}}人</view>
			<view class="add">+添加新成员</view>
		</view>
		<view class="content">
			<div class="item" v-for="(item, index) in 3" :key="index">
				<u-avatar :src="member.src" shape="circle" size="55"></u-avatar>
				<text>{{member.name}}</text>
				<text>{{member.position}}</text>
				<text class="blue">{{member.phone}}</text>
				<text class="blue">重置</text>
				<text>删除</text>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 3,
				member: {
					src: '',
					name: '张三',
					position: '负责人',
					phone: '12345636676'
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.top {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 100rpx;
		background-color: #00a743;
		color: #fff;
		line-height: 100rpx;
	}

	.content {
		.item {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			height: 150rpx;
			border-bottom: 1px solid #afafaf;
			line-height: 150rpx;
			font-size: 30rpx;

			.blue {
				color: blue;
			}
		}
	}
</style>